<template>
  <div>
    <van-nav-bar title="" left-text="返回" fixed left-arrow @click-left="onClickLeft" />
    <div class="title">
      <van-image :width="imgwidth" :src="`https://gw.alicdn.com/${data.poster}`" />
      <div class="info">
        <h2>{{ data.showName }}</h2>
        <p>{{ data.showNameEn }}</p>
        <p>{{ data.type }}</p>
        <p>{{ data.country }} | {{ data.duration }}分钟</p>
        <p>{{ data.openTime }}在中国上映</p>
        <div>
          <van-rate :size="10" v-model="remark" allow-half color="#ffd21e" void-icon="star" void-color="#eee" />
          <span class="mark">{{ data.remark }}</span>
        </div>
      </div>
    </div>
    <div :class="open ? 'describ' : 'describe'">
      {{ data.description }}
    </div>
    <van-button class="but" @click="changeOpen">{{ open? '收回': '展开' }}</van-button>

    <div class="staff">
      <h2>演剧人员</h2>
      <div class="img">
        <div v-for="(item, index) in data.artistes.actor">
          <van-image :width="img3width" :height="img2width" :src="`https://gw.alicdn.com/${item.avatar}`"
            @click="Preview(index, 'staffimg')" />
          <h3>{{ item.artisteName }}</h3>
          <p>{{ item.profession }}</p>
        </div>
      </div>
    </div>

    <div class="stills">
      <h2>剧照</h2>
      <div>
        <div v-for="(item, index) in data.trailer">
          <van-image :height="img2width" :src="`https://gw.alicdn.com/${item}`" @click="Preview(index, 'stillsimg')" />
        </div>
      </div>
    </div>

    <div class="comment">
      <h2>热门评论<span>(105707条)</span></h2>
      <div>
        <div v-for="item in evaluation" class="box">
          <div><van-image round width="1.5rem" height="1.5rem"
              src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_100x100.jpg" /></div>
          <div class="body">
            <div class="top">
              <div class="name">{{ item.nickName }}</div>
              <div><van-rate :size="10" v-model="item.remark" allow-half color="#ffd21e" void-icon="star"
                  void-color="#eee" /></div>
              <div class="time">12-05 16:07</div>
            </div>
            <div class="info">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <p class="no">没有更多了~</p>

    </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { ImagePreview } from 'vant'

import http from '../../request/index'

export default {
  name: 'Total',
  data() {
    return {
      data: {},
      evaluation: [],
      open: false,
      staffimg: [],
      stillsimg: []
    }
  },
  computed: {
    ...mapState(['detailStr']),

    imgwidth() {
      return (125 / 16) + 'rem'
    },
    img2width() {
      return (124 / 16) + 'rem'
    },
    img3width() {
      return (80 / 16) + 'rem'
    },
    remark: {
      get() {
        return this.data.remark - 5
      },
      set(v) {
        this.remark = v
      }
    }
  },
  methods: {
    ...mapMutations(['changeFooter']),
    // 返回按钮
    onClickLeft() {
      this.$router.back()
    },
    // 详情的展开
    changeOpen() {
      this.open = !this.open
    },
    // 图片预览
    Preview(index, type) {
      ImagePreview({
        images: this[type],
        startPosition: index,
      });
    },
  },
  created() {
    this.changeFooter(false)
    http('/info/', this, 'get', { params: { name: this.detailStr } }).then(res => {
      if (res.data.data.returnCode === '0') {
        this.data = res.data.data.returnValue
        this.staffimg = res.data.data.returnValue.artistes.actor.map(i => 'https://gw.alicdn.com/' + i.avatar)
        this.stillsimg = res.data.data.returnValue.trailer.map(i => 'https://gw.alicdn.com/' + i)
      }
      console.log(res.data.data.returnValue);
    }).catch(err => console.log(err))
    http('/evaluation/', this, 'get', { params: { name: this.detailStr } }).then(res => {
      if (res.data.data.returnCode === '0') {
        this.evaluation = res.data.data.returnValue.map(i => {
          i.remark = i.remark - 5
          return i
        })
      }
      console.log(this.evaluation);
    }).catch(err => console.log(err))
  },
  beforeDestroy() {
    this.changeFooter(true)
  }
}
</script>

<style lang='less' scoped>
.title {
  margin-top: 46px;
  display: flex;
  // align-items: flex-end;
  height: (188/16rem);
  background-image: url(../../../static/images/mbg.png);
  overflow: hidden;
  padding-top: (14/16rem);
  padding-left: (14/16rem);

  .info {
    color: #fff;
    margin-left: (15/16rem);
    margin-top: (5/16rem);

    h2 {
      font-size: (19/16rem);
      padding-bottom: (10/16rem);
    }

    p {
      opacity: .8;
      font-size: (12/16rem);
      line-height: (25/16rem);
    }

    span {
      font-size: (12/16rem);
    }

    div {
      margin-top: (10/16rem);
    }
  }
}

.describe {
  margin: (20/16rem) (15/16rem);
  line-height: (28/16rem);
  font-size: (15/16rem);
  height: (110/16rem);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.describ {
  margin: (20/16rem) (15/16rem);
  line-height: (28/16rem);
  font-size: (15/16rem);
}

.but {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: (100/16rem);
}

.staff {
  margin-top: (80/16rem);
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  padding-left: (15/16rem);
  padding-bottom: (20/16rem);

  h2 {
    margin-top: (20/16rem);
    font-weight: 700;
  }

  .img {
    display: flex;
    margin-top: (15/16rem);
    overflow: auto;
    padding-bottom: (10/16rem);

    div {
      margin-right: (5/16rem);
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        font-size: (13/16rem);
      }

      p {
        font-size: (12/16rem);
        font-weight: normal;
        color: #999;
      }
    }
  }
}

.stills {
  padding-left: (15/16rem);
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: (20/16rem);

  h2 {
    margin-top: (20/16rem);
    font-weight: 700;
  }

  div {
    margin-top: (5/16rem);
    white-space: nowrap;
    overflow: auto;

    div {
      display: inline-block;
    }
  }
}

.comment {
  padding-left: (15/16rem);
  padding-right: (5/16rem);

  h2 {
    margin-top: (20/16rem);
    font-weight: 700;

    span {
      color: #666;
    }
  }

  div {
    .box {
      display: flex;
      margin-top: (10/16rem);
      padding-bottom: (15/16rem);
      border-bottom: 1px solid #d9d9d9;

      .body {
        .top {
          display: flex;
          align-items: center;

          .name {
            width: (120/16rem);
            font-size: (14/16rem);
            font-weight: 700;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .time {
            font-size: (12/16rem);
            color: #666;
            margin-left: (80/16rem);
          }
        }

        .info {
          font-size: (12/16rem);
          line-height: (20/16rem);
        }
      }
    }
  }

  .no {
    margin-top: (20/16rem);
    padding-bottom: (20/16rem);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    height: (20/16rem);
  }
}
</style>